<!DOCTYPE html>
<html>
    <head>
        <title>DOM Map</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <style>
            .rowContainer {
                float: left;
            }
            .basicSquare {
                height: 5%;
                min-height: 5%;
                
                width: 5%;
                min-width: 5%;
                float: left;
            }
            
            .blackSquare {
                background-color: black;
            }
            
            .whiteSquare {
                background-color: white;
            }
            
            .blueSquare {
                background-color: blue;
            }
            
            .redSquare {
                background-color: red;
            }
            
            #window {
                margin: 75px 15% 0 15%;
                height: 500px;
                width: 500px;
                border: solid thin black;
                overflow: hidden;
                
            }
            
            #map  {
                position: relative;
                left: -150px;
                top: -50px;
                background-color: green;
                height: 640px;
                width: 800px;                
            }
            
        </style>
    </head>    
    <body>
        <div id="window">
            <div id="map"></div>
        </div>
        <script>
            function renderMap(){
                var mapHeight = 640;
                var mapWidth = 800;
                var widthSpan = 20;
                var heightSpan = 20;
                
                var body = $("#map");
                var additionHandler = body.append;
                var color;
                
                for(var x = 0; x < widthSpan ; x++){
                    var row = document.createElement("span");
                    row.cellX = x;
                    
                    var id = row.id = "x" + x;
                    body.append(row);
                    row = $("#" + id);                    
                    newRow(x, widthSpan, row);
                    
                    
                }
            }            
            
            function newRow(x, length, body){
                
                    
                for(var y = 0 ; y < length; y++){
                    var el = document.createElement("div");
                    
                    el.cellY = y;
                    el.innerHTML = "&nbsp;";
                    //el.setAttribute("style", "float: left; background-color: "+  color +"; " + cellHeightStyle + cellWidthStyle);
                    if((x+y) % 2 == 0){
                        el.setAttribute("class", "basicSquare whiteSquare");
                    }else{
                        el.setAttribute("class", "basicSquare blackSquare");
                    }
                    el.setAttribute("y", y);
                    body.append(el);
                    
                }
                body.append("<br style=\"clear:left\" >");
            }
            
            function scrollLeft(){
                
                $("#map span").each( function(index, element){
                    var cell = $("div:first", this).detach();
                    var y = cell[0].cellY;
                    var x = this.cellX;
                    
                    var el = document.createElement("div");
                    el.cellY = y + 20;
                    
                    delete cell;
                    if((x + y) % 2 ==0 ){
                        el.setAttribute("class", "basicSquare redSquare");    
                    }else{
                        el.setAttribute("class", "basicSquare blueSquare");    
                        
                    }
                    
                    $(this).append( el);
                    
                    delete cell, x, y, el;
                });
                
                
            }
            function scrollDown(){
                var map = $("#map");
                
                var row = $("#map span:first").detach();
                var x = row[0].cellX = row[0].cellX + 20;
                row[0].id = "#x" + x;
                map.append(row);
                
                
            }
            
            $(renderMap);
            
            $(function(){
                //var interval = setInterval(scrollLeft, 300);
                var interval2 = setInterval(scrollDown, 400);
            })
            
        </script>
    </body>
</html>